<template>
  <div class="echartsBody">
    <div class="echartsBody1" ref="echarts1"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    name: {
      type: String,
      default() {
        return '';
      }
    },
  },
  mounted() {
    var that = this;
    const viewElem = document.body;
    // 监听窗口变化,重绘echarts
    const resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        that.drawEcharts();
      }, 300)
    });
    resizeObserver.observe(viewElem);
  },
  computed: {
    colorList: function () {
      var that = this;
      var colorList = []
      that.list.forEach((type) => {
          if (type.checked) {
            var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
              offset: 0,
              color: type.color
            }, {
              offset: 1,
              color: type.color
            }])
            colorList.push(color)
          }
        }
      );
      return colorList
    },
  },
  methods: {

    drawEcharts() {
      var that = this
      let myChart = echarts.init(this.$refs.echarts1)
      var colors = this.colorList
      var data = []
      that.list.forEach((type) => {
        if (type.checked) {
          var datas = {
            ...type,
            itemStyle: {
              normal: {
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: type.color
                }, {
                  offset: 1,
                  color: type.color
                }]),
                shadowColor: that.shadowColor
              }
            }
          }
          data.push(datas)
        }
      });
      var option = {
        color: colors,
        tooltip: {
          trigger: 'item',
          borderColor: 'rgba(0, 0, 0, 0)',
          backgroundColor: 'rgba(0, 0, 0, 0.6)', // 黑色背景，透明度0.7
          formatter: function (params) {
            return `
          <div class="tooltipInfo">
            <h3>${that.name}</h3>
            <p>${params.name}: <span> ${params.value}</span></p>
          </div>
        `;
          }
        },
        series: [
          {
            name: that.name,
            type: 'pie',
            roseType: 'area',
            center: ['50%', '50%'],
            radius: ['0%', '80%'],
            labelLine: {
              normal: {
                length: 20
              }
            },
            label: {
              show: false,
              position: 'inside',
              formatter: '{d}%',
              color: '#fff',
              fontSize: 16
            },
            itemStyle: {
              normal: {
                borderColor: '#3eebc4',
                borderWidth: 0
              }
            },
            data: data
          },
          // 圆点背景
          {
            type: 'pie',
            name: '饼状背景',
            z: 2,
            radius: ['0%', '10%'],
            center: ['50%', '50%'],
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: '#f3f7ff'
                }, {
                  offset: 1,
                  color: '#f3f7ff'
                }])
              },
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
          // 圆点外围渐变光圈
          {
            type: 'pie',
            name: '饼状背景',
            z: 2,
            radius: ['0%', '25%'],
            center: ['50%', '50%'],
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: new echarts.graphic.RadialGradient(.5, .5, 0.5, [{
                  offset: 0,
                  color: 'rgba(233, 239, 255, 0.1)'
                },
                  {
                    offset: 0.5,
                    color: 'rgba(233, 239, 255, 0.1)'
                  }, {
                    offset: 0.9,
                    color: 'rgba(233, 239, 255, 0.42)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(233, 239, 255, 0.6)'
                  }
                ], false),
              }
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="less" scoped>
.echartsBody {
  position: relative;
  width: 50%;
  height: calc(70% - 0px);

  .echartsBody1 {
    position: relative;
    width: 100%;
    height: calc(100% - 0px);
  }

  .echartsBody2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 0px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    pointer-events: none;

    .echartsTitle {
      font-size: 30px;
      font-family: DIN;
      font-weight: normal;
      color: #FFFFFF;
      text-shadow: 0 0 10px rgba(120, 168, 238, 1.00);
    }

    .echartsDesc {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #9DB9E9;
    }
  }
}

</style>
<style lang="less">

.tooltipInfo {

  h3 {
    font-size: 16px;
    font-family: MiSans;
    font-weight: 400;
    color: #CCD9E5;
    margin-bottom: 5px;
  }

  p {
    font-size: 16px;
    font-family: MicrosoftYaHei;
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 5px;

    span {
      font-size: 24px;
      font-family: yejing;
      font-weight: normal;
      color: #FFFFFF;
      text-shadow:0 0 10px #fff;
    }
  }
}
</style>
